<template>
  <div>
    <div class="navbar">
        <div class="nav-top user">
            <el-popover
                popper-class="user_popover"
                placement="right-start"
                width="350"
                trigger="click">

                <div class="user_box">
                    <div class="user_top">
                        <div class="info-avatar">
                            <div class="upload_pic_btn" @click="openCropper">
                                <img class="upload_pic" src="../../assets/upload_pic.png">
                            </div>
                            <img class="avatar-image" :src="$store.state.user.headImg" />
                        </div>
                        <p class="user_name">{{$store.state.user.userName}}</p>
                        <!-- <p class="user_loginname">oTPVK53m7o1ZQo-sABDiI5ziJz-k</p> -->
                        <!-- <img class="qrcode" src="../../assets/qrcode.png" @click="openQrcode"> -->
                        <img class="user_bg" :src="$store.state.user.headImg" />
                    </div>

                    <div class="user_center">
                        <div class="user_line">
                            <div class="line_title">签名</div>
                            <div class="line_value">{{$store.state.user.remarks}}</div>
                        </div>
                        <!-- <div class="user_line">
                            <div class="line_title">地区</div>
                            <div class="line_value">广东省 广州市</div>
                        </div> -->
                        <div class="user_line">
                            <div class="line_title">设置</div>
                            <div class="line_value">允许别人搜到我</div>
                            <div class="line_end">已开启</div>
                        </div>
                        <div class="user_line">
                            <div class="line_title"></div>
                            <div class="line_value">加好友时需要验证</div>
                            <div class="line_end">已开启</div>
                        </div>
                    </div>
                    
                    <div class="user_bottom">
                        <div class="primarybtn" @click="openChangeInfo">修改信息</div>
                        <!-- <div class="primarybtn default">发消息</div> -->
                    </div>
                </div>

                <div class="avatar-box user-avatar" slot="reference">
                    <img class="avatar-image" :src="$store.state.user.headImg" />
                </div>
            </el-popover>
        </div>
        <ul class="nav-center">
            <li :class="['nav_switch','talk_switch',{'active':$store.state.nav=='talk'}]" @click="switchNav('talk')">
                <div class="nav_text">聊天</div>
                <!-- <span class="notread">1</span> -->
            </li>
            <li :class="['nav_switch','friends_switch',{'active':$store.state.nav=='friends'}]" @click="switchNav('friends')">
                <div class="nav_text">好友</div>
                <!-- <span class="notread">1</span> -->
            </li>
            <li :class="['nav_switch','group_switch',{'active':$store.state.nav=='group'}]" @click="switchNav('group')">
                <div class="nav_text">群聊</div>
                <!-- <span class="notread">1</span> -->
            </li>
        </ul>


        <!-- <el-popover
            popper-class="menu_popover"
            placement="right-end"
            width="97"
            trigger="click">

            <ul class="menu_box">
                <li class="menu_line" @click="openChangeMobile">
                    <img class="menu_pic" src="../../assets/icons/icon_mobile_up.png" />
                    <span class="menu_text">修改手机</span>
                </li>
                <li class="menu_line" @click="openChangePsw">
                    <img class="menu_pic" src="../../assets/icons/icon_lock_up.png" />
                    <span class="menu_text">修改密码</span>
                </li>
                <li class="menu_line" @click="openQuitLogin">
                    <img class="menu_pic" src="../../assets/icons/icon_logout_up.png" />
                    <span class="menu_text">退出登录</span>
                </li>
            </ul>
            <div class="nav-bottom" slot="reference">
                <div class="nav-bottom-img"></div>
            </div>
        </el-popover> -->
    </div>

    <el-dialog
      :visible.sync="infoState"
      width="373px"
      :show-close="false"
      :close-on-click-modal="false">
      <div class="dialog_title">修改个人信息</div>
      <!-- <div class="info_line">
        <div class="info_title">账号</div>
        <div class="info_text">oTPVK53m7o1ZQo-sABDiI5ziJz-k</div>
      </div> -->

      <div class="info_line">
        <div class="info_title">昵称</div>
        <div class="info_detail">
            <input class="info_nick" maxlength="30" v-model="nickName"/>
            <span class="nick_num">{{nickName.length}}/30</span>
        </div>
      </div>

      <div class="info_sign_line">
        <div class="info_title">签名</div>
        <div class="info_sign_detail">
            <textarea class="info_sign" maxlength="500" v-model="signText"></textarea>
            <div class="sign_num">{{signText.length}}/500</div>
        </div>
      </div>

      <!-- <div class="info_line">
        <div class="info_title">性别</div>
            <el-select popper-class="sex_select" v-model="select" placeholder="请选择" @change="chooseSex">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
                <el-option label="保密" value="3"></el-option>
            </el-select>
      </div>

      <div class="info_line">
        <div class="info_title" style="align-self:flex-start">地区</div>
        <div class="info_place">
            <div class="info_area">广东省 广州市</div>
            <span class="area_tips">(注册IP归属地，暂不支持修改)</span>
        </div>
      </div>

      <div class="info_line">
        <div class="info_title" style="align-self:flex-start">设置</div>
        <div class="info_set">
            <div class="set_box">
                <div class="set_text">允许别人搜到我</div>
                <el-switch v-model="searchAble" @change="changeSearchAble" :width="28"></el-switch>
            </div>
            <div class="set_box">
                <div class="set_text">加好友时需要验证</div>
                <el-switch v-model="isTest" @change="changeTestSwitch" :width="28"></el-switch>
            </div>
        </div>
      </div> -->

      <div class="btns_box">
        <div class="primarybtn default" @click="cancelInfo">取消</div>
        <div class="primarybtn" @click="saveInfo">保存</div>
      </div>
    </el-dialog>

    <!-- 修改手机号弹窗 -->
    <!-- <el-dialog
        :visible.sync="mobileDialogState"
        width="428px"
        :show-close="false"
        :close-on-click-modal="false">

        <div class="mobile_page page1">
            <div class="mobile_top">
                <span class="mobile_title">修改手机号</span>
                <img class="cancel_mobile_dialog" src="../../assets/choose.png" @click="cancelChangeMobile"/>
            </div>
            <div class="mobile_step_box">
                <div class="step_line active"></div>
                <div class="step_line"></div>
                <div class="step_line"></div>
            </div>

            <div class="updateMobile_tips">短信验证码将发送至当前手机号：136****5885</div>
            
            <div class="code_box">
                <div class="code_input_box">
                    <img class="safe_icon" src="../../assets/safe.png"/>
                    <input class="code_input" type="text" placeholder="请输入您的验证码" maxlength="6"/>
                </div>
                <div class="getcode_btn">获取验证码</div>
            </div>

            <div class="next_btn">下一步</div>
        </div>
    </el-dialog> -->

    <el-dialog
      :visible.sync="pswDialogState"
      width="373px"
      :show-close="false"
      :close-on-click-modal="false">

      <div class="dialog_title">修改密码</div>
      <div class="input_box">
        <div class="input_line">
            <div class="psw_title">原密码</div>
            <div class="psw_box">
                <el-input
                    class="psw_input"
                    type="password"
                    placeholder="请输入原密码"
                    v-model="oldPassword"
                    clearable>
                </el-input>
            </div>
        </div>
        <div class="input_line">
            <div class="psw_title">新密码</div>
            <div class="psw_box">
                <el-input
                    class="psw_input"
                    type="password"
                    placeholder="请输入新密码"
                    v-model="newPassword"
                    clearable>
                </el-input>
            </div>
        </div>
        <div class="input_line">
            <div class="psw_title">确认新密码</div>
            <div class="psw_box">
                <el-input
                    class="psw_input"
                    type="password"
                    placeholder="请确认新密码"
                    v-model="newPasswordAgain"
                    clearable>
                </el-input>
            </div>
        </div>
      </div>
      <div class="btns_box">
        <div class="primarybtn default" @click="cancelChangePsw">取消</div>
        <div class="primarybtn">保存</div>
      </div>
    </el-dialog>

    <el-dialog
        :visible.sync="quitLoginDialog"
        width="290px"
        :show-close="false"
        :close-on-click-modal="false">

        <div class="dialog_tips">确定退出登录?</div>
        <div class="btns_box">
          <div class="primarybtn default" @click="cancelQuitLogin">取消</div>
          <div class="primarybtn">确定</div>
        </div>
    </el-dialog>

    <talk v-if="$store.state.nav=='talk'" />
    <friends v-if="$store.state.nav=='friends'" @changeFriendDetail="changeFriendDetail" />
    <group v-if="$store.state.nav=='group'" />

    <communicateOne v-if="$store.state.nav=='talk'&&$store.state.chatList"/>
    <friendsApply v-show="$store.state.nav=='friends'&&!friendChoosed" />
    <friendDetail v-show="$store.state.nav=='friends'&&friendChoosed" />
    <groupDetail v-if="$store.state.nav=='group'"/>

    <qrcode :showQrcode="showQrcode" @cancelQrcode="cancelQrcode" />
    <cropper :cropperData="cropperData" @cancelCropper="cancelCropper" />
  </div>
</template>

<script>
import talk from '../talk'
import friends from '../friends'
import group from '../group'
import qrcode from '../qrcode'
import communicateOne from '../communicateOne'
import friendsApply from '../friends_apply'
import friendDetail from '../friend_detail'
import groupDetail from '../group_detail'
import cropper from '../cropper'
import {changeInfo,friendsList,groupList,newChatList} from '../../api/api'
import {Popover,Dialog,Input,Select,Option,Switch,Message} from 'element-ui'
export default {
    name:'chatroom',
    data(){
        return {
            nav:'',
            friendChoosed:false,
            showQrcode:false,
            infoState:false,
            select:'',
            searchAble:true,
            isTest:true,
            mobileDialogState:false,
            pswDialogState:false,
            quitLoginDialog:false,
            oldPassword:'',
            newPassword:'',
            newPasswordAgain:'',
            cropperData:{
                type:'penson',
                cropperState:false,
            },
            nickName:'',
            signText:''
        }
    },
    components: {
        talk,
        friends,
        group,
        qrcode,
        communicateOne,
        friendsApply,
        friendDetail,
        groupDetail,
        cropper,
        'el-input':Input,
        'el-select':Select,
        'el-option':Option,
        'el-dialog':Dialog,
        'el-popover':Popover,
        'el-switch':Switch
    },
    mounted(){
        let params = {
            userId:this.$store.state.user.id
        }
        //加载好友列表
        friendsList(params)
        .then(res => {
            var list = res.data.data.list
            list.forEach((element)=>{
                element.choose = false
            })
            this.$store.commit('getFriendsList',res.data.data.list)
        })

        let params1 = {
            pageNo:1,
            pageSize:500,
            masterId:this.$store.state.user.id
        }
        //加载群聊列表
        groupList(params1)
        .then(res => {
            var list = res.data.data.list
            this.$store.commit('getGroupList',list)
        })

        let params2 = {
            userId:this.$store.state.user.id
        }
        //加载聊天列表
        newChatList(params2)
        .then(res => {
            var list = res.data.data
            this.$store.commit('getChatList',list)
            this.nav = 'talk'
            this.$store.commit('setNav','talk')
        })
    },
    methods:{
        //切换左侧组件
        switchNav(str){
            this.nav = str
            this.$store.commit('setNav',str)
            this.friendChoosed = false
        },
        //打开用户信息二维码弹窗
        openQrcode(){
            this.showQrcode = true
        },
        cancelQrcode(qrCodeState){
            this.showQrcode = qrCodeState
        },
        //打开退出登录确认弹窗
        openQuitLogin(){
            this.quitLoginDialog = true
        },
        //关闭退出登录确认弹窗
        cancelQuitLogin(){
            this.quitLoginDialog = false
        },
        //打开修改手机弹窗
        openChangeMobile(){
            this.mobileDialogState = true
        },
        //关闭修改手机弹窗
        cancelChangeMobile(){
            this.mobileDialogState = false
        },
        //打开修改密码弹窗
        openChangePsw(){
            this.pswDialogState = true
        },
        //关闭修改密码弹窗
        cancelChangePsw(){
            this.pswDialogState = false
        },
        //修改个人资料
        openChangeInfo(){
            this.infoState = true
        },
        //关闭修改个人资料
        cancelInfo(){
            this.infoState = false
        },
        saveInfo(){
            let params = {
                userId:this.$store.state.user.id,
                userName:this.nickName,
                remarks:this.signText
            }
            changeInfo(params)
            .then(response => {
                this.$store.commit('setUserInfo',{userName:this.nickName})

                let params = {
                    userId:this.$store.state.user.id
                }
                //加载好友列表
                friendsList(params)
                .then(res => {
                    this.$store.commit('getFriendsList',res.data.data.list)
                })

                this.cancelInfo()

                Message({
                    message: '修改个人信息成功',
                    type: 'success'
                })
            })
        },
        //选择性别
        chooseSex(val){
            console.log(val)
        },
        //改变允许别人搜索到我的状态
        changeSearchAble(val){
            console.log(val)
        },
        //加好友时是否需要验证
        changeTestSwitch(val){
            console.log(val)
        },
        changeFriendDetail(val){
            this.friendChoosed = val
        },
        openCropper(){
            this.cropperData.type = 'person'
            this.cropperData.cropperState = true
        },
        cancelCropper(val){
            this.cropperData.cropperState = val
        }
    }
}
</script>

<style scoped>
.navbar{
    width: 60px;
    height:100%;
    text-align: center;
    border-right: 1px solid #f3f3f3;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}
.navbar .user{
    position: relative;
    height:69px;
    overflow: hidden;
}
.navbar .user-avatar{
    width: 36px;
    height: 36px;
    margin: 10px auto 20px;
    cursor: pointer;
}
.navbar .nav-center{
    overflow: hidden;
    min-height:400px;
    padding: 0;
}
.avatar-image{
    width:100%;
    height:100%;
    display: inline-block;
    overflow: hidden;
}
.nav_switch{
    position: relative;
    width:60px;
    height:55px;
    cursor: pointer;
    color:#999;
}
.nav_switch.active{
    color:#3d98ff;
}
.notread{
    background: #fb7b7a;
    color: #fff;
    text-align: center;
    padding: 0 4px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    margin-left: 12px;
}
.talk_switch{
    background-image: url('../../assets/message_choose.png');
    background-repeat: no-repeat;
    background-position: center 5px;
}
.friends_switch{
    background-image: url('../../assets/friends_choose.png');
    background-repeat: no-repeat;
    background-position: center 5px;
}
.group_switch{
    background-image: url('../../assets/group_choose.png');
    background-repeat: no-repeat;
    background-position: center 5px;
}
.talk_switch.active{
    background-image: url('../../assets/message_choosed.png');
}
.friends_switch.active{
    background-image: url('../../assets/friends_choosed.png');
}
.group_switch.active{
    background-image: url('../../assets/group_choosed.png');
}
.nav_switch .nav_pic{
    width:20px;
    height:auto;
}
.nav_text{
    font-size: 12px;
    padding-top:30px;
}
.nav-bottom {
  width: 100%;
  height: 50px;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  bottom: 15px;
}
.nav-bottom-img {
  width: 20px;
  height: 20px;
  background-image: url("../../assets/icons/icon_hamburger_up.png");
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  background-size: 100%;
}
.nav-bottom-img:hover {
  background-image: url("../../assets/icons/icon_hamburger_hover.png");
}

/*个人用户信息弹窗*/
.user_box{
    height:357px;
    border-radius: 4px;
}
.user_top{
    width:100%;
    height:140px;
    position: relative;
    overflow: hidden;
}
.info-avatar{
    position: relative;
    width:60px;
    height:60px;
    margin:20px auto 0px;
    cursor: pointer;
}
.user_name{
    font-size:14px;
    color:white;
    text-align: center;
    margin: 3px 0;
    height: 18px;
}
.user_loginname{
    font-size:12px;
    color:white;
    text-align: center;
    height: 14px;
}
.user_bg{
    position: absolute;
    width: 100%;
    height:400px;
    left: 0;
    top: -105px;
    background-color: #000;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    z-index: -1;
}
.upload_pic_btn{
    display: none;
    position:absolute;
    width:100%;
    height:100%;
    align-items: center;
    justify-content: center;
}
.upload_pic{
    width:28px;
    height:28px;
}
.info-avatar:hover .upload_pic_btn{
    display: flex;
    background: rgba(0,0,0,0.7);
}
.qrcode{
    position:absolute;
    width:20px;
    height:20px;
    z-index: 10;
    top:10px;
    right:10px;
    cursor: pointer;
}
.user_center{
    padding-top:12px;
}
.user_line{
    width:100%;
    height:31px;
    padding: 7px 16px;
    font-size:12px;
    box-sizing: border-box;
}
.line_title{
    color:#999;
    width:30px;
    display: inline-block;
    text-align: center;
}
.line_value{
    display: inline-block;
    margin-left:5px;
}
.line_end{
    float:right;
    color:#999;
}
.user_bottom{
    padding:30px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu_line{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:40px;
    cursor: pointer;
}
.menu_line:hover{
    background: #edeff3;
}
.menu_pic{
    width:20px;
}
.menu_text{
    margin-left:2px;
    font-size: 14px;
    color: #333;
}

.dialog_title{
    display: flex;
    align-items: center;
    line-height: 60px;
    padding: 0 25px 0 30px;
}
.info_line{
    display: flex;
    align-items: center;
    padding: 7px 25px 7px 30px;
}
.info_title{
    font-size: 12px;
    color: #999;
    padding-right:12px;
}
.info_text{
    font-size: 12px;
    color: #333;
    flex:1;
}
.info_detail{
    display: flex;
    align-items: center;
    flex:1;
    border: 1px solid #f1f1f1;
    padding: 5px 7px;
}
.info_nick{
    font-size: 12px;
    color:#333;
    flex:1;
    border:none;
}
.nick_num{
    color: #c9c9c9;
    font-size: 10px;
}
.info_sign_line{
    display: flex;
    align-items: flex-start;
    padding: 7px 25px 7px 30px;
}
.info_sign_detail{
    flex:1;
    border: 1px solid #f1f1f1;
    padding: 6px 7px 3px;
}
.info_sign{
    outline: none;
    border: none;
    resize: none;
    font-size: 12px;
    width: 100%;
    height: 34px;
    padding: 0;
}
.sign_num{
    text-align:right;
    color: #c9c9c9;
    font-size: 10px;
}
.info_area{
    font-size: 12px;
    color:#333;
}
.area_tips{
    font-size: 12px;
    color: #999;
}
.set_text{
    font-size: 12px;
    color:#333;
}
.info_set{
    flex:1;
}
.set_box{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.btns_box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0px;
}
.btns_box .primarybtn{
  margin-left:40px;
}
.btns_box .primarybtn.default{
  margin-left:0;
}

.dialog_tips{
  line-height: 20px;
  padding: 46px 0 17px;
  text-align: center;
}
.input_box{
  padding: 0 25px 0 30px;
}
.psw_box{
  flex:1;
}
.input_line{
  display: flex;
  align-items: center;
  margin:20px 0px;
}
.psw_title{
  width: 74px;
  font-size: 12px;
  color: #999;
}
.psw_input{
  height: 27px;
}

.mobile_page{
    padding:24px;
}
.mobile_top{
    text-align: center;
}
.mobile_title{
    font-size: 14px;
    color: #333;
}
.cancel_mobile_dialog{
    float:right;
    width: 20px;
    cursor: pointer;
}
.mobile_step_box{
    margin:0 auto;
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step_line{
    width: 34px;
    height: 2px;
    background: #f1f1f1;
    margin:0 10px;
}
.step_line.active{
    background: rgb(53, 150, 252);
}
.updateMobile_tips{
    margin-top: 44px;
    text-align: center;
    margin-bottom: 2px;
}
.code_box{
    margin:0 auto;
    margin-top:26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.code_input_box{
    height: 42px;
    border-radius: 50px;
    background: #e1efff;
    padding: 0 25px 0 17px;
    position: relative;
    display: flex;
    align-items: center;
    width: 250px;
    box-sizing: border-box;
}
.safe_icon{
    width:24px;
    height: 24px;
}
.code_input{
    border:none;
    flex:1;
    background: transparent;
}
.getcode_btn{
    height: 42px;
    width: 86px;
    background: linear-gradient(90deg,#44baf8,#3596fc);
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    color: #fff;
    font-size: 12px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    right: 75px;
}
.next_btn{
    width:250px;
    height:40px;
    text-align: center;
    line-height: 40px;
    margin:30px auto;
    margin-top:100px;
    border-radius: 50px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(90deg,#44baf8,#3596fc);
    box-shadow: 0 2px 6px #8dbff8;
    cursor: pointer;
}
</style>